<div class="flex flex-col flex-auto min-w-0">

    <!-- Header -->
    <div class="relative pt-8 pb-28 px-4 sm:pt-20 sm:pb-48 sm:px-16 overflow-hidden bg-gray-800 dark:bg-gray-900 dark">
        <!-- Background - @formatter:off -->
        <!-- Rings -->
        <svg class="absolute inset-0 pointer-events-none"
             viewBox="0 0 960 540" width="100%" height="100%" preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
            <g class="text-gray-700 opacity-25" fill="none" stroke="currentColor" stroke-width="100">
                <circle r="234" cx="196" cy="23"></circle>
                <circle r="234" cx="790" cy="491"></circle>
            </g>
        </svg>
        <!-- @formatter:on -->
        <div class="z-10 relative flex flex-col items-center">
            <h2 class="text-xl font-semibold">HELP CENTER</h2>
            <div class="mt-1 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight text-center">
                How can we help you today?
            </div>
            <div class="mt-3 sm:text-2xl text-center tracking-tight text-secondary">
                Search for a topic or question, check out our FAQs and guides, contact us for detailed support
            </div>
            <mat-form-field class="fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full max-w-80 sm:max-w-120 mt-10 sm:mt-20">
                <input
                    matInput
                    [placeholder]="'Enter a question, topic or keyword'">
                <mat-icon
                    matPrefix
                    [svgIcon]="'heroicons_outline:search'"></mat-icon>
            </mat-form-field>
        </div>
    </div>

    <div class="flex flex-col items-center pb-6 px-6 sm:pb-10 sm:px-10">
        <!-- Cards -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-y-8 md:gap-y-0 md:gap-x-6 w-full max-w-sm md:max-w-4xl -mt-16 sm:-mt-24">
            <!-- FAQs card -->
            <div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transform transition-shadow ease-in-out duration-150">
                <div class="flex flex-col flex-auto items-center p-8 text-center">
                    <div class="text-2xl font-semibold">FAQs</div>
                    <div class="md:max-w-40 mt-1 text-secondary">Frequently asked questions and answers</div>
                </div>
                <div class="flex items-center justify-center py-4 px-8 text-primary-500 dark:text-primary-400 bg-gray-50 dark:bg-transparent dark:border-t">
                    <a
                        class="flex items-center"
                        [routerLink]="['faqs']">
                        <span class="absolute inset-0"></span>
                        <span class="font-medium">Go to FAQs</span>
                        <mat-icon
                            class="ml-2 icon-size-5 text-current"
                            [svgIcon]="'heroicons_solid:arrow-narrow-right'"></mat-icon>
                    </a>
                </div>
            </div>
            <!-- Guides card -->
            <div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transform transition-shadow ease-in-out duration-150">
                <div class="flex flex-col flex-auto items-center p-8 text-center">
                    <div class="text-2xl font-semibold">Guides</div>
                    <div class="md:max-w-40 mt-1 text-secondary">Articles and resources to guide you</div>
                </div>
                <div class="flex items-center justify-center py-4 px-8 text-primary-500 dark:text-primary-400 bg-gray-50 dark:bg-transparent dark:border-t">
                    <a
                        class="flex items-center"
                        [routerLink]="['guides']">
                        <span class="absolute inset-0"></span>
                        <span class="font-medium">Check guides</span>
                        <mat-icon
                            class="ml-2 icon-size-5 text-current"
                            [svgIcon]="'heroicons_solid:arrow-narrow-right'"></mat-icon>
                    </a>
                </div>
            </div>
            <!-- Support card -->
            <div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transform transition-shadow ease-in-out duration-150">
                <div class="flex flex-col flex-auto items-center p-8 text-center">
                    <div class="text-2xl font-semibold">Support</div>
                    <div class="md:max-w-40 mt-1 text-secondary">Contact us for more detailed support</div>
                </div>
                <div class="flex items-center justify-center py-4 px-8 text-primary-500 dark:text-primary-400 bg-gray-50 dark:bg-transparent dark:border-t">
                    <a
                        class="flex items-center"
                        [routerLink]="['support']">
                        <span class="absolute inset-0"></span>
                        <span class="font-medium">Contact us</span>
                        <mat-icon
                            class="ml-2 icon-size-5 text-current"
                            [svgIcon]="'heroicons_solid:arrow-narrow-right'"></mat-icon>
                    </a>
                </div>
            </div>
        </div>
        <!-- FAQs -->
        <div class="mt-24 text-3xl sm:text-5xl font-extrabold leading-tight tracking-tight text-center">Most frequently asked questions</div>
        <div class="mt-2 text-xl text-center text-secondary">Here are the most frequently asked questions you may check before getting started</div>
        <mat-accordion class="max-w-4xl mt-12">
            <ng-container *ngFor="let faq of faqCategory.faqs; trackBy: trackByFn">
                <mat-expansion-panel>
                    <mat-expansion-panel-header [collapsedHeight]="'56px'">
                        <mat-panel-title>{{faq.question}}</mat-panel-title>
                    </mat-expansion-panel-header>
                    {{faq.answer}}
                </mat-expansion-panel>
            </ng-container>
        </mat-accordion>
    </div>
</div>
